import React from 'react';
import {message, Tabs} from 'antd';
import {WeaInput, WeaInputNumber, WeaLocaleProvider, WeaSelect, WeaTableEditable,WeaTextarea} from 'ecCom';

const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
const TabPane = Tabs.TabPane;

/**
 * 考核指标组件
 */
export default class ProgramTarget extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            accessList:[]
        };
    }
    componentWillMount() {
        this.setState({accessList:this.props.accessItemList});
    }
    componentWillReceiveProps(newProps){
        this.setState({accessList:newProps.accessItemList});
    }
    render() {
        let {detailList, showTitle, onDataChange, checkDisabledTarget, accessItemList, showStatus} = this.props;
        let {accessList} = this.state;
        const assessDetailColumns = [{
            title: <span>{getLabel('455', '分类')}</span>,
            dataIndex: 'cate', key: 'cate', width: '15%',
            com: [{type: 'INPUT', key: 'cate', viewAttr: showStatus ? 2 : 1}],
        }, {
            title: <span>{getLabel('33365', '指标名称')}</span>,
            dataIndex: 'accessitemid', key: 'accessitemid', width: '20%',
            com: [{
                type: "CUSTOM",
                key: "accessitemid",
                render: (text, record, index, onEdit) => (
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@37zsev@accessitemid${index}`}
                        options={toJS(accessList)}
                        value={text}
                        viewAttr={showStatus ? 3 : 1}
                        onChange={(v) => {
                            onEdit({
                                type: "CUSTOM",
                                record: {
                                    ...record,
                                    accessitemid: v,
                                    description:(accessList.find((d,i)=>d.key==v)).itemdesc
                                },
                            });
                        }}
                    />
                )
            }]
        }, {
            title: <span>{getLabel('508669', '指标描述')}</span>,
            dataIndex: 'description', key: 'description', width: '30%',
           // com: [{type: 'TEXTAREA', defaultValue: "", key: 'description', viewAttr: showStatus ? 2 : 1}],
            com:[{
                type: "CUSTOM",
                key: "description",
                render: (text, record, index, onEdit) => (
                    <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@u7x3q8@desc${index}`}
                        value={text}
                        viewAttr={showStatus ? 2 : 1}
                        onChange={(v) => {
                            onEdit({
                                type: "CUSTOM",
                                record: {
                                    ...record,
                                    description: v
                                },
                            }),this.onTextChange(v,record.accessitemid);
                        }}
                    />
                )
            }]
        }, {
            title: <span>{getLabel('6071', '权重')}(%)</span>,
            dataIndex: 'rate', key: 'rate', width: '10%',
            com: [{
                type: 'INPUTNUMBER',
                key: 'rate',
                precision: '2',
                max: '100',
                min: '0',
                viewAttr: showStatus ? 3 : 1
            }],
        }, {
            title: <span>{getLabel('18087', '目标值')}</span>,
            dataIndex: 'target', key: 'target', width: '22%',
            com: [{
                type: "CUSTOM",
                key: "target",
                render: (text, record, index, onEdit) => {
                    let item = accessItemList.find(accessItem => accessItem.key == record.accessitemid)
                    if (item != undefined && item.itemtype == '2') {
                        return <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ka27ca@target${index}`}
                            value={record.target}
                            precision={2}
                            max={99999999.99}
                            viewAttr={showStatus ? 3 : 1}
                            onChange={(val) => {
                                onEdit({
                                    type: "CUSTOM",
                                    record: {
                                        ...record,
                                        target: val,
                                    },
                                });
                            }}
                        />
                    } else if (item != undefined && item.itemtype == '1') {
                        return <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@bwm7up@target${index}`}
                            value={record.target}
                            viewAttr={showStatus ? 2 : 1}
                            onChange={(val) => {
                                onEdit({
                                    type: "CUSTOM",
                                    record: {
                                        ...record,
                                        target: val,
                                    },
                                });
                            }}
                        />
                    } else {
                        return <span>{getLabel('508671', '请先选择指标类型')}</span>
                    }
                }
            }]
        }];

        return <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@ph3lqj`}
            ref='tableEditPo'
            buttonsType='inline'
            viewAttr={showStatus ? 2 : 1}
            showTitle={showStatus}
            getRowSelection={(rowSelection) => {
                return !showStatus ? false : rowSelection
            }}
            title={showTitle ? "考核指标" : ""}
            columns={assessDetailColumns}
            datas={toJS(detailList)}
            willAdd={(datas) => {
                onDataChange(datas);
                return true;
            }}
            willDelete={(datas) => {
                onDataChange(datas);
                return true;
            }}
            willCopy={(datas, selectedKeys, copyDatas) => {
                if (checkDisabledTarget) {
                    if (copyDatas.some(item => accessItemList.find(accessItem => accessItem.key == item.accessitemid && accessItem.disabled))) {
                        message.warning(getLabel(511550, '不能复制没有权限或已禁用的指标'));
                        return false;
                    } else {
                        onDataChange(datas);
                        return true;
                    }
                } else {
                    onDataChange(datas);
                    return true;
                }
            }}
            onChange={(datas) => {
                onDataChange(datas);
                return true;
            }}
        />
    }
    onTextChange(v,key){
        if(key!=""){
            let {accessList} = this.state;
            accessList && accessList.map((element,idx)=>{
                if(element.key==key){
                    element.itemdesc = v;
                }
            })
            this.setState({accessList:accessList});
        }
    }
};